<template>
    <div>
        <h2>计数：{{ counter }}</h2>
        <button @click="counter++">+1</button>
        <button @click="name = 'jack'">修改name</button>
</div>
</template>
<script>
import { reactive ,ref, watch, watchEffect} from 'vue'
    export default {
        setup(){
            const counter = ref(0)
            const name = ref('inzv')
            // watch(counter,(newValue,oldValue)=>{
            //     console.log(newValue,oldValue);
            // })
            //1.watchEffect传入的西数默认会直接被执行
            //2.在执行的过程中，会自动的收集依赖(依赖哪些响应式的数据)

            // 返回值停止监听
           const stopWatch =  watchEffect(()=>{
                console.log('------',counter.value,name.value);
                // 判断counter大于10
                if(counter.value >= 10){
                    stopWatch()
                }
            })
                return{
                    counter,
                    name
                }
        }
    }
</script>
<style  scoped>
    /*局部css 支持css3 可以改变elementUI组件的样式 且组件样式调整只在本页面生效**/
    /*主样式*/
</style>